iT邦幫忙

2024 iThome 鐵人賽

DAY 5
1
JavaScript

不會 VueUse 而被提分手的我系列 第 5

D-05 useVModel 文件說明與範例 — 實用性很高の函式之一

  • 分享至 

  • xImage
  •  

好像有那麼一點感覺了,但感覺又太簡單,沒有隔壁鱈魚說的那麼誇張,應該需要更難一點的挑戰,畢竟我可是遇強則強,遇弱則弱的特殊體質。
#挽回愛情的第五天
https://ithelp.ithome.com.tw/upload/images/20240918/201621153lYaK9WqL4.png

useVModel API

功能

useVModel 是一個用於簡化 v-model 雙向綁定的 Vue 工具函數。它允許開發者更靈活地處理 propsemit 事件的綁定,並可透過 passive 模式來手動管理 props 的變更與資料流。當 passive: false 時,useVModel 會依賴 Vue 的內建雙向綁定機制;而當 passive: true 時,則會使用 watch 來手動處理資料同步。


Props

名稱 類型 說明
props P extends object 父層組件傳入的 props 對象
key K extends keyof P 用來指定 props 中的鍵名稱,默認為 modelValue
emit (name: string, ...args: any[]) => void emit 函數,用於向父層傳遞更新事件。
options UseVModelOptions<P[K], Passive> 可選配置參數,用於調整綁定行為,具體選項參考下方詳細描述。

Options

名稱 類型 說明 預設值
passive boolean 控制是否使用手動模式 (true) 或 Vue 自動模式 (false) 來同步 propsemit 的資料。 false
eventName string 自定義 emit 事件名稱,當不使用默認的 v-model 綁定時,設定此名稱覆蓋默認的事件名稱。 undefined
deep boolean passive: true 時,可啟用深層監聽以監控深層嵌套的物件變化。 false
defaultValue P[K] 在沒有傳入 props 值時,設定此值作為默認值。 undefined
clone boolean | (val: P[K]) => P[K] 是否深度拷貝 props 中的資料,防止資料直接改動影響父層,或自定義複製邏輯。 false
shouldEmit (v: P[K]) => boolean passive: true 時,允許自定義條件來決定是否發送 emit 事件。例如表單驗證通過才允許發送。 undefined

passive: false 時無法使用的選項

passive: false 時,useVModel 會使用 Vue 自動的雙向綁定機制,某些選項將不會生效或無法使用:

  1. deep
    • 無效:深層監聽僅在 passive: true 下可用,當使用 Vue 自動綁定時,無法監聽深層嵌套物件的變化。
  2. clone
    • 無效:自動綁定時,資料直接反映到 props 上,無法使用深拷貝或自定義複製邏輯來隔離資料。
  3. shouldEmit
    • 無效shouldEmit 只在手動同步模式 (passive: true) 下可用,控制是否發送 emit 事件。在 passive: false 時,emit 事件會自動觸發,無法進行條件判斷。

返回值

useVModel 返回一個 refcomputed 對象,用於與 propsemit 事件進行綁定:

  • passive: false:返回一個 computed,自動進行雙向綁定,透過 Vue 的內建 v-model 機制處理資料變更。
  • passive: true:返回一個 ref,並使用手動監聽 props 的方式來控制綁定邏輯。

用法範例

範例 1:使用 passive: false 的簡單雙向綁定

線上玩玩看這個範例

<template>
  <input v-model="value" />
</template>

<script setup>
import { useVModel } from '@vueuse/core'

const props = defineProps({
  modelValue: String,
})

const emit = defineEmits(['update:modelValue'])

// 使用 Vue 內建的 v-model 機制
const value = useVModel(props, 'modelValue', emit, { passive: false })
</script>

範例 2:使用 passive: true 進行自定義雙向綁定和驗證

線上玩玩看這個範例

<template>
  <input v-model="value" placeholder="輸入數字 (必須大於 10)" />
</template>

<script setup>
import { useVModel } from '@vueuse/core'

const props = defineProps({
  numberValue: Number,
})

const emit = defineEmits(['update:numberValue'])

// 使用 passive: true 手動控制資料同步,並添加驗證邏輯
const value = useVModel(props, 'numberValue', emit, {
  passive: true,
  shouldEmit: (newValue) => newValue > 10, // 僅當值大於 10 時才觸發更新
})
</script>


如果有不懂或是有寫錯的可以留言讓我知道喔


上一篇
D-04 isDefined 解析與動機 — 簡單感受一下 VueUse 的美 2
下一篇
D-06 useVModel 解析與動機 — 實用性很高の函式之一
系列文
不會 VueUse 而被提分手的我30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言